<template>
  <div class="list">
    <div class="list-item" @click="handleLetterClick" v-for="(item,key) in cities" :key="key">{{key}}</div>
  </div>
</template>

<script>
export default {
  name: 'Alphabet',
  props: {
    cities: {
      type: Object,
      default: () => {}
    }
  },
  methods: {
    handleLetterClick (e) {
      this.$emit('letter', e.target.innerHTML)
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/styles/varibles.styl'
  .list
   display flex
   flex-direction column
   justify-content center
   position absolute
   top 1.54rem
   right 0
   bottom 0
   width .4rem
   .list-item
    color $bgColor
    line-height .4rem
    text-align center
</style>
